import { Layout, Button, Typography, Row, Col, Card } from 'antd';
import { useNavigate } from 'react-router-dom'
import { message } from "antd";
import { useSelector } from 'react-redux';
import {
  BarChartOutlined,
  LineChartOutlined,
  PieChartOutlined,
  RadarChartOutlined,
  ApartmentOutlined
} from '@ant-design/icons';
import request from '@/api/request';
// 测试mock模拟接口
request.get({ url: "/testing" }).then(val => {
  console.log(val);
}).catch(err => {
  console.log(err);
})

const { Header, Content, Footer } = Layout;
const { Title } = Typography;

export default function Landing() {
  const navigate = useNavigate()
  const token = useSelector((state:any)=>state.user.userInfo.token)

  const handleClick=()=>{
    // 判断无 token 令牌字符串，则强制跳转到登录页
    if(!token || token===''){
      message.warning('未登录，请先进行登录');
      setTimeout(()=>{
        navigate('/login');
      },2000)
    }else{
       navigate('/workbench');
    }
  }

  return (
    <Layout style={{ minHeight: '100vh', backgroundImage: 'url(/landing.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }}> {/* 设置整个页面的背景图片 */}
      <Header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'transparent' }}>
        <div style={{
          width: '300px',
          height: '31px',
          margin: '16px 24px 16px 0'
        }}>
          <ApartmentOutlined style={{ fontSize: '32px' }} />
          <span style={{ color: 'black', marginLeft: '10px', fontFamily: 'STHupo', fontSize: '25px' }}>一站式商品管理平台</span>
        </div>
        <div>
          <Button type="default" style={{ color: 'black', marginRight: '16px' }} onClick={() => navigate('/login')}>登录</Button>
          <Button type="primary" style={{ backgroundColor: 'rgba(251, 147, 55)' }} onClick={() => navigate('/register')}>注册</Button>
        </div>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <div style={{
          padding: '24px',
          minHeight: '280px'
        }}>
          <Title level={1} style={{ margin: '40px 0' }}>
            为会员运营小二提供
            <br />
            一站式商品管理的工作平台
          </Title>
          <Row gutter={[16, 16]} justify="start" style={{ textAlign: 'left', width: '500px' }}>
            <Col span={12}>
              <Card title="商品发布" bordered={false} style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <BarChartOutlined style={{ fontSize: '32px' }} />
              </Card>
            </Col>
            <Col span={12}>
              <Card title="商品管理" bordered={false} style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <LineChartOutlined style={{ fontSize: '32px' }} />
              </Card>
            </Col>
            <Col span={12}>
              <Card title="草稿管理" bordered={false} style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <PieChartOutlined style={{ fontSize: '32px' }} />
              </Card>
            </Col>
            <Col span={12}>
              <Card title="数据展示" bordered={false} style={{ display: 'flex', justifyContent: 'flex-start' }}>
                <RadarChartOutlined style={{ fontSize: '32px' }} />
              </Card>
            </Col>
            <Button type="primary" size="large" style={{
              marginTop: '30px', backgroundColor: 'rgba(251, 147, 55)', padding: '28px 32px', fontSize: '18px',
              borderRadius: '0px 20px 10px 20px'
            }} onClick={handleClick}>
              用户运营&#8594;
            </Button>
          </Row>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        ©2024 一站式商品管理平台
      </Footer>
    </Layout>
  )

}